<script setup>
    import { ref, onMounted } from 'vue'
    import { get_total_cards, handle_card_page_change, get_courses, send_card_mes } from '@/api/member.js'
    // 初始化isContainerVisible
    const isContainerVisible = ref(true)
    // 存储会员卡信息
    const userCards = ref([])

    // editIndex
    const editIndex = ref(0)

    // delIndex
    const delIndex = ref(0)

    // 课程
    const courses = ref([])

    // 分页参数
    const currentPage = ref(1) // 当前页码
    const pageSize = ref(5)    // 每页显示的行数
    const totalPages = ref(0)
    const totalRecords = ref()

    // 获取所有会员卡条目
    const getTotalCards = () => {
        get_total_cards().then(res => {
            totalRecords.value = res.data.data
            totalPages.value = Math.ceil(totalRecords.value / pageSize.value)
        })
    }
    
    // 会员卡分页
    const handlePageChange = (page) => {
        currentPage.value = page
        handle_card_page_change(page, pageSize.value).then(res => {
            userCards.value = res.data.data
        })
    }

    // 写入的会员卡信息（或读取的会员卡信息）
    const cardData = ref({
        name: '',
        price: '',
        description: '',
        note: '',
        type: '',
        validCount: '',
        validDay: '',
        courses: []
    })

    // 用于跟踪选中的课程
    const selectedCourses = ref([]);

    // 处理选择变化事件
    function handleSelectionChange(val) {
        selectedCourses.value = val;
        cardData.value.courses = val.map(item => item.id);
        console.log("选中的课程：", cardData.value.courses);
    }

    // 获取课程信息
    const getCourses = () => {
        console.log("正在获取课程信息");
        get_courses().then(res => {
            courses.value = res.data.data
        })
    }

    // dialog显示
    const centerDialogVisible = ref(false)

    // 点击“编辑”按钮后将目前已有的数据写入cardData

    // 发送新增会员卡信息到后端（或编辑后信息）
    const sendCardMes = () => {
        console.log("cardData:", cardData.value);
        send_card_mes(cardData.value).then(res => {
            centerDialogVisible.value = true
            console.log("发送会员卡信息到后端：", res)
        })
    }

    getTotalCards()
    handlePageChange(currentPage.value, pageSize.value)
    

</script>

<template>
    <el-container direction="vertical" v-show="isContainerVisible">
        <div>
            <el-button type="primary" icon="Plus"
                @click="isContainerVisible = !isContainerVisible, getCourses()">添加会员卡</el-button>
        </div>
        <hr>
        <div>
            <el-table :data="userCards" stripe border style="width: 100%">
                <el-table-column prop="name" label="会员卡名称" />
                <el-table-column prop="price" label="价格" />
                <el-table-column prop="type" label="类型" />
                <el-table-column prop="validCount" label="可用次数" />
                <el-table-column prop="validDay" label="有效天数" />
                <!-- 操作列 -->
                <el-table-column fixed="right" prop="operation" label="操作" width="280">
                    <template #default={$index}>
                        <el-button type="primary" size="small" icon="Edit"
                            @click="isContainerVisible = !isContainerVisible, editIndex = $index">编辑</el-button>
                        <el-button type="danger" size="small" icon="CloseBold" @click="delIndex = $index">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div>
            <el-pagination :page-size="pageSize" layout="prev, pager, next" :total="totalRecords"
                :current-page="currentPage" @current-change="handlePageChange" />
        </div>
    </el-container>

    <el-container direction="vertical" v-show="!isContainerVisible">
        <el-main style="height: 100%; padding-left: 5%">
            <el-form label-width="120px" :model="cardData">
                <el-form-item label="会员卡名称" style="width: 40%">
                    <el-input v-model="cardData.name"></el-input>
                </el-form-item>
                <el-form-item label="价格" style="width: 40%">
                    <el-input v-model="cardData.price"></el-input>
                </el-form-item>
                <el-form-item label="描述信息" style="width: 80%">
                    <el-input type="textarea" v-model="cardData.description"></el-input>
                </el-form-item>
                <el-form-item label="备注信息" style="width: 80%">
                    <el-input type="textarea" v-model="cardData.note"></el-input>
                </el-form-item>
                <el-form-item label="会员卡类型" style="width: 40%">
                    <el-input v-model="cardData.type"></el-input>
                </el-form-item>
                <el-form-item label="可用次数" style="width: 20%">
                    <el-input v-model="cardData.validCount"></el-input>
                </el-form-item>
                <el-form-item label="可用天数" style="width: 20%">
                    <el-input v-model="cardData.validDay"></el-input>
                </el-form-item>
                <el-form-item label="支持课程" style="width: 40%">
                    <el-table ref="multipleTableRef" border :data="courses" @selection-change="handleSelectionChange"
                        style="width: 100%;">
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="课程" prop="name" />
                    </el-table>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="sendCardMes">保存</el-button>
            <el-button @click="isContainerVisible = !isContainerVisible">取消</el-button>
        </el-main>
    </el-container>

    <!-- 对话框 -->
    <el-dialog v-model="centerDialogVisible" title="提示" width="1000" destroy-on-close center 
        @close="centerDialogVisible = !centerDialogVisible, isContainerVisible = !isContainerVisible">
        <el-alert title="会员卡绑定成功！" type="success" center show-icon :closable="false"/>
    </el-dialog>
</template>

<style scoped>
    .el-dialog {
        --el-dialog-title-font-size: 40px;
    }
    .el-alert {
        height: 120px;
        --el-alert-title-font-size: 100px;
    }
</style>